<template>
  <div>
    <el-drawer
      :title="proTitle"
      :visible.sync="proDataOpen"
      :before-close="cancel"
      size="68%"
      class="always_title"
    >
<!--      :withHeader="true"-->
      <div style="padding: 0 30px; height: 93%">
      <el-tabs class="always_title" v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="项目概况" name="first">
                  <el-form
                    ref="vFormPro"
                    :model="projectFormData"
                    label-width="120px"
                  >
                    <el-row>
                      <el-col :span="8" class="grid-cell">
                        <el-form-item label="销售线索" prop="salesLeadName">
                          <el-input
                            type="text"
                            :size="medium"
                            disabled
                            v-model="projectFormData.salesLeadName"
                            clearable
                            placeholder="请输入销售线索"
                          ></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8" class="grid-cell">
                        <el-form-item label="项目名称" prop="projectName">
                          <el-input
                            type="text"
                            v-model="projectFormData.projectName"
                            :size="medium"
                            clearable
                            disabled
                            placeholder="请输入项目名称"
                          />
                        </el-form-item>
                      </el-col>
                      <el-col :span="8" class="grid-cell">
                        <el-form-item label="项目编码" prop="projectCode">
                          <el-input
                            type="text"
                            :size="medium"
                            disabled
                            v-model="projectFormData.projectCode"
                            clearable
                            placeholder="请输入项目编码"
                          />
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="8" class="grid-cell">
                        <el-form-item label="客户单位" prop="primaryCustomer">
                          <el-input
                            type="text"
                            :size="medium"
                            v-model="projectFormData.primaryCustomer"
                            clearable
                            disabled
                            placeholder="请选择客户单位"
                          />
                        </el-form-item>
                      </el-col>
                      <el-col :span="8" class="grid-cell">
                        <el-form-item label="项目类型" prop="projectType">
                          <el-select
                            style="width: 100%"
                            placeholder="请选择项目类型"
                            :size="medium"
                            disabled
                            v-model="projectFormData.projectType"
                          >
                            <el-option label="安全生产管理体系咨询" value="安全生产管理体系咨询"></el-option>
                            <el-option label="安全生产标准化达标评级" value="安全生产标准化达标评级"></el-option>
                            <el-option label="应急管理咨询" value="应急管理咨询"></el-option>
                            <el-option label="课件及题库" value="课件及题库"></el-option>
                            <el-option label="生产智能风险管控平台" value="生产智能风险管控平台"></el-option>
                            <el-option label="基建智能风险管控" value="基建智能风险管控"></el-option>
                            <el-option label="发电企业安全教育培训系统" value="发电企业安全教育培训系统"></el-option>
                            <el-option label="承包商管控系统" value="承包商管控系统"></el-option>
                            <el-option label="现场管控硬件" value="现场管控硬件"></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8" class="grid-cell">
                        <el-form-item label="立项日期" prop="setProjectTime">
                          <el-date-picker
                            style="width: 100%"
                            type="date"
                            disabled
                            :size="medium"
                            v-model="projectFormData.setProjectTime"
                            clearable
                            placeholder="请选择日期"
                            align="right"
                            value-format="yyyy-MM-dd"
                          />
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="8" class="grid-cell">
                    <el-form-item label="隶属销售" prop="affiliateSaleName">
                      <el-input
                        type="text"
                        :size="medium"
                        disabled
                        v-model="projectFormData.affiliateSaleName"
                        clearable
                        placeholder="请输入隶属销售"
                      />
                    </el-form-item>
                      </el-col>
                      <el-col :span="8" class="grid-cell">
                    <el-form-item label="阿米巴长" prop="projectManagerName">
                      <el-input
                        type="text"
                        disabled
                        :size="medium"
                        v-model="projectFormData.projectManagerName"
                        clearable
                        placeholder="请输入阿米巴长"
                      />
                    </el-form-item>
                      </el-col>
                      <el-col :span="8" class="grid-cell">
                    <el-form-item label="产品经理" prop="productManagerName">
                      <el-input
                        :size="medium"
                        disabled
                        type="text"
                        v-model="projectFormData.productManagerName"
                        clearable
                        placeholder="请输入产品经理"
                      />
                    </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="8" class="grid-cell">
                    <el-form-item label="预计签单时间" prop="expectSignTime">
                      <el-date-picker
                        style="width: 100%"
                        type="date"
                        disabled
                        :size="medium"
                        clearable
                        v-model="projectFormData.expectSignTime"
                        placeholder="请选择日期"
                        align="right"
                        value-format="yyyy-MM-dd"
                      />
                    </el-form-item>
                      </el-col>
                      <el-col :span="8" class="grid-cell">
                    <el-form-item label="预期金额" prop="expectMoney">
                      <el-input
                        type="text"
                        disabled
                        :size="medium"
                        v-model="projectFormData.expectMoney"
                        clearable
                        placeholder="请输入预期金额"
                      />
                    </el-form-item>
                      </el-col>
                      <el-col :span="8" class="grid-cell">
                    <el-form-item label="合同金额(元)" prop="contractAmount">
                      <el-input
                        v-model="contractAmount"
                        :size="medium"
                        type="text"
                        clearable
                        disabled
                        placeholder="合同金额(元)"
                      />
                    </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="8" class="grid-cell">
                    <el-form-item label="可能性" prop="examiner">
                      <el-radio-group v-model="projectFormData.possibility"
                                      :size="medium"
                                      disabled
                      >
                        <el-radio label="0">较低</el-radio>
                        <el-radio label="1">适中</el-radio>
                        <el-radio label="2">较高</el-radio>
                      </el-radio-group>
                    </el-form-item>
                      </el-col>
                      <el-col :span="8.5" class="grid-cell">
                        <el-form-item label="科目类别" prop="accountCategory">
                          <el-radio-group v-model="projectFormData.accountCategory" :size="medium" disabled>
                            <el-radio label="外部项目">外部项目</el-radio>
                            <el-radio label="公司项目">公司项目</el-radio>
                            <el-radio label="TC项目">TC项目</el-radio>
                          </el-radio-group>
                        </el-form-item>
                      </el-col>
                      <el-col :span="7" class="grid-cell">
                        <el-form-item label="项目类别" prop="projectCategoryName">
                          <el-radio-group v-model="projectFormData.projectCategoryName" :size="medium" disabled>
                            <el-radio label="计划项目">计划项目</el-radio>
                            <el-radio label="储备项目">储备项目</el-radio>
                          </el-radio-group>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="8" class="grid-cell">
                        <el-form-item label="产品类型" prop="productTypeName">
                          <el-select
                            style="width: 100%"
                            placeholder="请选择产品类型"
                            :size="medium"
                            clearable
                            disabled
                            v-model="projectFormData.productTypeName"
                          >
                            <el-option label="定制软件产品" value="定制软件产品"></el-option>
                            <el-option label="成型软件产品" value="成型软件产品"></el-option>
                            <el-option label="安全评审服务" value="安全评审管理"></el-option>
                            <el-option label="其他" value="其他"></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8" class="grid-cell">
                        <el-form-item label="所属部门" prop="deptName">
                          <el-select ref="mySelect" v-model="projectFormData.deptName" :size="medium" disabled
                                     filterable placeholder="请选择" style="width: 100%">
                            <el-option

                              v-for="item in deptsOptions"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8" class="grid-cell">
                        <el-form-item label="登记人" prop="createByName">
                          <el-input
                            type="text"
                            :size="medium"
                            v-model="projectFormData.createByName"
                            clearable
                            disabled
                            placeholder="登记人"
                          />
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="8" class="grid-cell">
                        <el-form-item label="登记日期" prop="createTime">
                          <el-date-picker
                            style="width: 100%"
                            type="date"
                            disabled
                            :size="medium"
                            clearable
                            v-model="projectFormData.createTime"
                            placeholder="请选择日期"
                            align="right"
                            value-format="yyyy-MM-dd"
                          />
                        </el-form-item>
                      </el-col>
                      <el-col :span="8" class="grid-cell">
                        <el-form-item label="项目状态" prop="projectStatus">
                          <el-select
                            style="width: 100%"
                            ref="mySelect"
                            v-model="projectFormData.projectStatus"
                            :size="medium"
                            disabled
                            filterable
                            placeholder="请选择">
                            <el-option
                              v-for="item in statusOptions"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12" class="grid-cell">
                        <el-form-item
                          label="项目周期"
                          prop="dateRange"

                        >
                          <el-date-picker
                            v-model="projectCycle"
                            type="daterange"
                            :size="medium"
                            disabled
                            style="width: 100%"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                          ></el-date-picker>
                        </el-form-item>
                      </el-col>

                    </el-row>
                    <el-row>
                      <el-col :span="24" class="grid-cell">
                        <el-form-item
                          label="项目概要"
                          class="sel-width"
                        >
                          <el-input
                            :size="medium"
                            type="textarea"
                            v-model="projectFormData.projectSummary"
                            :rows="4"
                            disabled
                            placeholder="请输入内容"
                          >
                          </el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24" class="grid-cell">
                        <el-form-item
                          label="备注"
                          class="sel-width"
                        >
                          <el-input
                            :size="medium"
                            disabled
                            v-model="projectFormData.remark"
                            type="textarea"
                            :rows="4"
                            placeholder="请输入内容"
                          >
                          </el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form>
          <el-col :span="24" class="margin_col" name="1">
            <div class="always_handerOne1">
              <custom-buttons
                @back="handleBack"
              ></custom-buttons>
            </div>
          </el-col>
        </el-tab-pane>
        <el-tab-pane label="项目人员" name="third">
          <el-table border :data="personListData">
            <el-table-column class="ellipsis" label="序号" prop="index" width="50" align="left" header-align="left">
              <template slot-scope="scope">
                <div class="ellipsis">{{ scope.row.index }}</div>
              </template>
            </el-table-column>
            <el-table-column label="姓名" align="left" prop="personName">
              <template slot-scope="scope">
                <div class="ellipsis">{{ scope.row.personName }}</div>
              </template>
            </el-table-column>
            <el-table-column label="进入项目日期" align="left" prop="startTime">
              <template slot-scope="scope">
                <div class="ellipsis"> {{ scope.row.startTime | formatDate }}</div>
              </template>
            </el-table-column>
            <el-table-column label="角色" align="left" prop="role">
              <template slot-scope="scope">
                <div class="ellipsis">{{ scope.row.role }}</div>
              </template>
            </el-table-column>
            <el-table-column label="工时" align="left" prop="manHour">
              <template slot-scope="scope">
                <div class="ellipsis">{{ scope.row.manHour }}</div>
              </template>
            </el-table-column>
            <el-table-column label="未开始" align="left" prop="notStarted">
              <template slot-scope="scope">
                <div class="ellipsis">{{ scope.row.notStarted }}</div>
              </template>
            </el-table-column>
            <el-table-column label="进行中" align="left" prop="inProgress">
              <template slot-scope="scope">
                <div class="ellipsis">{{ scope.row.inProgress }}</div>
              </template>
            </el-table-column>
            <el-table-column label="已完成" align="left" prop="completed">
              <template slot-scope="scope">
                <div class="ellipsis">{{ scope.row.completed }}</div>
              </template>
            </el-table-column>
            <el-table-column label="完成率" align="left" prop="completionRate">
              <template slot-scope="scope">
                <div class="ellipsis">{{ scope.row.completionRate }}</div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="项目任务" name="second">
          <el-table
            :data="questListData"
            row-key="id"
            highlight-current-row
            border
            style="width: 100%;margin-bottom: 20px;"
            v-loading="loading"
            @row-click="handleRowDoubleClick"
          >
            <el-table-column type="selection" width="55" align="center"/>
            <el-table-column label="任务名称" :show-overflow-tooltip="true" align="left" prop="missionTheme" width="150">
              <template slot-scope="scope">
                <div style="display: flex; align-items: center;">
<!--                  <el-tag :type="getPriorityColor(scope.row.priority)" style="margin-right: 5px;">{{ scope.row.priority }}</el-tag>-->
                  <div class="ellipsis" style="margin-left: 5px;">{{ scope.row.missionTheme }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="任务类型" align="left" prop="missionType" width="100">
              <template slot-scope="scope">
                <div class="ellipsis">{{ scope.row.missionType }}</div>
              </template>
            </el-table-column>
            <el-table-column class="ellipsis" label="预估工时" align="left" prop="estimateManHour" width="80">
              <template slot-scope="scope">
                <div class="ellipsis">{{ scope.row.estimateManHour }}</div>
              </template>
            </el-table-column>
            <el-table-column class="ellipsis" label="已用工时" align="left" prop="workHour" width="80">
              <template slot-scope="scope">
                <div class="ellipsis">{{ scope.row.workHour }}</div>
              </template>
            </el-table-column>
            <el-table-column class="ellipsis" label="完成情况" align="left" prop="completionStatus" width="80">
              <template slot-scope="scope">
                <div class="ellipsis">{{ scope.row.completionStatus }}</div>
              </template>
            </el-table-column>
            <el-table-column label="负责人" align="left" prop="principalName" width="80">
              <template slot-scope="scope">
                <div class="ellipsis">{{ scope.row.principalName }}</div>
              </template>
            </el-table-column>
            <el-table-column label="协作人" align="left" :show-overflow-tooltip="true" prop="associatesName" width="100">
              <template slot-scope="scope">
                <div class="ellipsis">{{ scope.row.associatesName }}</div>
              </template>
            </el-table-column>
            <el-table-column label="发起人" align="left" prop="associatesName" width="80">
              <template slot-scope="scope">
                <div class="ellipsis">{{ scope.row.createByName }}</div>
              </template>
            </el-table-column>
            <el-table-column label="状态" align="left" prop="status" header-align="left" width="80">
              <template slot-scope="scope">
                <el-tag :type="getStatusColor(scope.row.status)">{{ scope.row.status }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column class="ellipsis" label="截至日期" align="left" prop="planEndTime" width="170">
              <template slot-scope="scope">
                <div style="display: flex; align-items: center;">
                  <div style="margin-right: 5px;">{{ scope.row.planEndTime | formatDate  }}</div>
                  <div class="ellipsis" v-show="scope.row.planEndTime !== null " style="margin-left: 5px; color: red;">{{getDelayDays(scope.row)}}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="任务详情" :show-overflow-tooltip="true" align="left" prop="remark">
              <template slot-scope="scope">
                  <div class="ellipsis">{{ scope.row.remark }}</div>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
          <el-collapse v-model="activeNames">
            <el-collapse-item
              name="1"
            >
              <template slot="title">
                <div class="always_title1">
                  <div></div>
                  工时填报信息
                </div>
              </template>
              <el-table
                :data="hourData"
                border
                style="width: 100%;margin-bottom: 20px;"
                v-loading="questLoading"
              >
                <el-table-column label="填报内容" align="left" prop="reportingContent" width="600">
                  <template slot-scope="scope">
                    <div class="ellipsis">{{ scope.row.reportingContent }}</div>
                  </template>
                </el-table-column>
                <el-table-column class="ellipsis" label="工时" align="left" prop="manHour">
                  <template slot-scope="scope">
                    <div class="ellipsis">{{ scope.row.manHour }}</div>
                  </template>
                </el-table-column>
                <el-table-column label="完成情况" align="left" prop="completionStatus">
                  <template slot-scope="scope">
                    <div class="ellipsis">{{ scope.row.completionStatus }}</div>
                  </template>
                </el-table-column>
                <el-table-column label="填写人" align="left" prop="createByName">
                  <template slot-scope="scope">
                    <div class="ellipsis">{{ scope.row.createByName }}</div>
                  </template>
                </el-table-column>
                <el-table-column label="填写时间" align="left" prop="createTime">
                  <template slot-scope="scope">
                    <div class="ellipsis">{{ scope.row.createTime | formatDate }}</div>
                  </template>
                </el-table-column>
              </el-table>
              <pagination
                v-show="hourTotal>0"
                :total="hourTotal"
                :page.sync="queryHourParams.pageNum"
                :limit.sync="queryHourParams.pageSize"
                @pagination="getHourList"
              />
            </el-collapse-item>
          </el-collapse>
        </el-tab-pane>
        <el-tab-pane label="技术难点" name="tech">
          <el-table v-loading="loading" :data="techListData" stripe>
            <el-table-column label="技术难题" align="left" prop="quest" >
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" :content=scope.row.techDiffi placement="top-start">
                  <div class="ellipsis">{{ scope.row.techDiffi }}</div>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column label="解决方法" align="left" prop="reportingContent" >
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" :content=scope.row.solveMethod placement="top-start">
                  <div class="ellipsis">{{ scope.row.solveMethod }}</div>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column class="ellipsis" label="状态" align="left" prop="techDiffiState" width="200">
            </el-table-column>
            <el-table-column label="添加人" align="left" prop="createByName" width="200">
              <template slot-scope="scope">
                <div class="ellipsis">{{ scope.row.createByName }}</div>
              </template>
            </el-table-column>
            <el-table-column label="添加时间" align="left" prop="createTime" width="200">
              <template slot-scope="scope">
                <div class="ellipsis">{{parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</div>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="techTotal>0"
            :total="techTotal"
            :page.sync="techParams.pageNum"
            :limit.sync="techParams.pageSize"
            @pagination="selectTech"
          />
        </el-tab-pane>
        <el-tab-pane label="工作记录" name="fiveth">
          <el-table v-loading="loading" :data="hourListData" stripe>
            <el-table-column label="任务主题" align="left" prop="quest" >
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" :content=scope.row.quest placement="top-start">
                  <div class="ellipsis">{{ scope.row.quest }}</div>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column class="ellipsis" label="工时" align="left" prop="manHour" width="200">
              <template slot-scope="scope">
                <div class="ellipsis">{{ scope.row.manHour }}</div>
              </template>
            </el-table-column>
            <el-table-column label="报工内容" align="left" prop="reportingContent" >
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" :content=scope.row.reportingContent placement="top-start">
                  <div class="ellipsis">{{ scope.row.reportingContent }}</div>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column label="记录人" align="left" prop="principalName" width="200">
              <template slot-scope="scope">
                <div class="ellipsis">{{ scope.row.createByName }}</div>
              </template>
            </el-table-column>
            <el-table-column label="记录时间" align="left" prop="createTime" width="200">
              <template slot-scope="scope">
                <div class="ellipsis">{{parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</div>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="workRecordsTotal>0"
            :total="workRecordsTotal"
            :page.sync="workRecordsParams.pageNum"
            :limit.sync="workRecordsParams.pageSize"
            @pagination="selectWorkRecords"
          />
        </el-tab-pane>
        <el-tab-pane label="项目文档" name="sixth">
          <el-table v-loading="loading" :data="fileListData" stripe>
            <el-table-column label="文档主题" align="left" prop="missionTheme" width="600">
              <template slot-scope="scope">
                <div class="ellipsis">
                  <a href="javascript:void(0)" @click="onPreviewFile(scope.row)" style="color: #409eff">{{ scope.row.fileName }}</a>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="文档类型" align="left" width="150">
              <template slot-scope="scope">
                <div class="ellipsis">{{ scope.row.fileType }}</div>
              </template>
            </el-table-column>
            <el-table-column class="ellipsis" label="创建人" align="left" prop="estimateManHour" width="100">
              <template slot-scope="scope">
                <div class="ellipsis">{{ scope.row.createByName }}</div>
              </template>
            </el-table-column>
            <el-table-column class="ellipsis" label="创建时间" align="left" prop="workHour" width="125">
              <template slot-scope="scope">
                <div class="ellipsis">{{ scope.row.createTime | formatDate }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="size" label="操作" width="240">
              <template slot-scope="{ row }">
                <el-button  type="success" @click="onPreviewFile(row)">预览</el-button>
                <el-button  type="warning" @click="fileDownload(row)">下载</el-button>
<!--                <el-button  type="primary" @click="queryBefFile(row)">历史附件</el-button>-->
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="fileTotal>0"
            :total="fileTotal"
            :page.sync="fileQueryParams.pageNum"
            :limit.sync="fileQueryParams.pageSize"
            @pagination="queryFile"
          />
        </el-tab-pane>
        <el-tab-pane label="费用支出" name="fourth"></el-tab-pane>
        <el-tab-pane label="风险点" name="risk">
          <el-button  type="primary" v-show="riskStatus" @click="addRiks">新增</el-button>
          <el-table v-loading="riskLoading" :data="riskListData" stripe>
            <el-table-column label="风险描述" :show-overflow-tooltip="true"  align="left" prop="riskDescription" width="450">
              <template slot-scope="scope">
                <div class="ellipsis">{{ scope.row.riskDescription }}</div>
              </template>
            </el-table-column>
            <el-table-column class="ellipsis" label="风险等级" align="let" prop="riskGrade">
              <template slot-scope="scope">
                <div class="ellipsis">{{ scope.row.riskGrade }}</div>
              </template>
            </el-table-column>
            <el-table-column class="ellipsis" label="负责人" align="let" prop="chargePersonName">
              <template slot-scope="scope">
                <div class="ellipsis">{{ scope.row.chargePersonName }}</div>
              </template>
            </el-table-column>
            <el-table-column class="ellipsis" label="是否解决" align="let" prop="isSolve">
              <template slot-scope="scope">
                <div class="ellipsis">{{ scope.row.isSolve }}</div>
              </template>
            </el-table-column>
            <el-table-column class="ellipsis" label="上报人" align="let" prop="createByName" >
              <template slot-scope="scope">
                <div class="ellipsis">{{ scope.row.createByName }}</div>
              </template>
            </el-table-column>
            <el-table-column class="ellipsis" label="截至时间" align="let" prop="deadline">
              <template slot-scope="scope">
                <span class="ellipsis">{{ parseTime(scope.row.deadline, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
        <div slot="footer" class="dialog-footer" style="display: flex; justify-content: center; padding: 20px 0;">
          <el-button @click="cancel">取 消</el-button>
        </div>
      </div>
    </el-drawer>
    <el-dialog title="风险点" :visible.sync="riskDialog" :width="'900px'"
               :height="'650px'"
    >
      <el-form
        :model="riskForm"
        ref="vFormQuest"
        label-position="center"
        label-width="120px"
        style="justify-content: flex-start"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="项目名称" prop="projectName" >
              <el-input
                v-model="riskForm.projectName"
                type="text"
                :size="medium"
                clearable
                disabled
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目代码" prop="projectCode" >
              <el-input
                v-model="riskForm.projectCode"
                :size="medium"
                type="text"
                clearable
                disabled
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="上报人" prop="createByName">
              <el-input
                v-model="riskForm.createByName"
                :size="medium"
                type="text"
                clearable
                disabled
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="风险等级" prop="riskGrade">
              <el-select v-model="riskForm.riskGrade" :size="medium" placeholder="请选择">
                <el-option
                  v-for="item in riskGradeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否解决" prop="isSolve">
              <el-select v-model="riskForm.isSolve" :size="medium" placeholder="请选择">
                <el-option
                  v-for="item in isSolveOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="负责人" prop="chargePersonName">
              <el-input
                v-model="riskForm.chargePersonName"
                type="text"
                clearable
                readonly
                :size="medium"
                @click.native ="personClick"
                placeholder="请选择负责人"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="截至时间" prop="deadline">
            <el-date-picker
              style="width: 100%;"
              v-model="riskForm.deadline"
              type="date"
              value-format="yyyy-MM-dd HH:mm:ss"
              :size="medium"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          </el-col>
        </el-row>
        <el-form-item
          label="风险描述"
          prop="riskDescription"
          class="sel-width"
          style="width: 99%;height: 33px"
        >
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
            v-model="riskForm.riskDescription"
            :size="medium"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="margin-top: 30px; display: flex; justify-content: center;">
        <el-button @click="handleConfirm">保 存</el-button>
        <el-button @click="cancelRisk">取 消</el-button>
      </div>
    </el-dialog>
    <PeopleSelect
      ref="peopleSelect"
      :type="'multiple'"
      :isCheck="true"
      :open="peopleOpen"
      @cancel="peopleOpen = false"
      @submit="submitPeople"
    ></PeopleSelect>
  </div>
</template>

<script>
import {listFile, onlinePreview} from "@/api/system/mis/file";
import {download, preview} from "@/api/system/sysFileInfo/fileInfo";
import {queryByQuestId, queryHourByProjectId} from "@/api/system/mis/manHour";
import {listTech} from "@/api/system/mis/tech";
import {getInit} from "@/api/system/mis/init";
import {selectContractByProId} from "@/api/system/mis/contract";
import moment from "moment";
import {listInitmsn, queryByProjectId} from "@/api/system/mis/initmsn";
import {addRisk, selectRiskByProId} from "@/api/system/mis/risk";
import Vue from "vue";
import PeopleSelect from "@/components/Selection";

export default {
  name: "ProSelect",
  components: {
    PeopleSelect,
  },
  dicts: ["sys_normal_disable", "sys_user_sex"],
  props: {
    width: {
      type: String,
      default: "900px",
    },
    height: {
      type: String,
      default: "650px",
    },
    proDataOpen: {
      type: Boolean,
      default: false,
    },
    riskStatus: {
      type: Boolean,
      default: false,
    },
    proTitle: {
      type: String,
      default: "项目信息",
    },
    id: {
      type: String,
      default: undefined,
    },
    riskChargeName: {
      type: String,
      default: undefined,
    },
    riskChargeCode: {
      type: String,
      default: undefined,
    },
  },
  computed: {},
  data() {
    return {
      form: {},
      // 总条数
      total: 0,
      deptsOptions:[
        {
          value: '咨询产品部',
          label: '咨询产品部'
        },
        {
          value: '软件产品部',
          label: '软件产品部'
        }
      ],
      statusOptions: [
        {
          value: '销售期',
          label: '销售期'
        },
        {
          value: '提前实施',
          label: '提前实施'
        },
        {
          value: '实施期',
          label: '实施期'
        },
        {
          value: '已验收',
          label: '已验收'
        },
        {
          value: '售后服务',
          label: '售后服务'
        }
      ],
      projectFormData:{},
      activeNames: ['1', '2', '3'],
      riskLoading: false,
      questLoading: false,
      peopleOpen: false,
      loading: false,
      projectCycle: [],
      riskListData: [],
      fileListData: [],
      hourListData: [],
      questListData: [],
      personListData: [],
      hourData: [],
      techListData: [],
      riskForm: {},
      isSolveOptions: [
        {
          value: "是",
          label: "是",
        },
        {
          value: "否",
          label: "否",
        },],
      riskGradeOptions: [
        {
          value: "中",
          label: "中",
        },
        {
          value: "高",
          label: "高",
        },
        {
          value: "紧急",
          label: "紧急",
        },],
      riskDialog: false,
      medium: 'medium',
      // 项目文档
      fileQueryParams: {
        pageNum: 1,
        pageSize: 10,
        refId: undefined,
        queryAll: undefined
      },
      fileTotal: 0,
      workRecordsParams: {
        pageNum: 1,
        pageSize: 10,
        projectId: undefined
      },
      workRecordsTotal: 0,
      techParams: {
        pageNum: 1,
        pageSize: 10,
        projectId: undefined
      },
      techTotal: 0,
      queryHourParams: {
        pageNum: 0,
        pageSize: 10,
        questId: undefined,
        projectId: undefined
      },
      activeName: 'first',
      hourTotal:0,
      contractAmount:0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        projectStatus: this.type =='clue'? '销售期' : undefined,
        projectName: undefined,
        salesLeadName: undefined,
        projectManagerName: undefined,
      },
    };
  },
  filters: {
    formatDate: function(value) {
      if (value) {
        return moment(value).format('YYYY-MM-DD')
      }
    }
  },
  created() {
    this.getList();
  },
  watch: {
    id(row){
      this.getList()
    },
  },
  methods: {
    /** 查询项目列表 */
    getList() {
      this.loading = true;
      this.activeName = 'first';
      if (this.id !== undefined){
        getInit(this.id).then(response => {
          this.projectFormData = response.data;
          if (this.projectFormData.projectStartTime != null){
            Vue.set(this.projectCycle, 0, this.projectFormData.projectStartTime)
            Vue.set(this.projectCycle, 1, this.projectFormData.projectEndTime)
          }
          // 合同
          this.selectContractAmount(this.id)
          // 人员
          this.selectPerson(this.id)
          // 查询项目下分配的任务
          this.selectquest(this.id)
          // 查询项目下技术难题
          this.selectTech(this.id)
          // 查询项目下工作记录
          this.selectWorkRecords(this.id)
          // 查询项目文档
          this.queryFile(this.id)
          // 获取项目风险点
          this.selectRisk(this.id)
        });
      }
    },
    // 查询合同额
    selectContractAmount(id){
      selectContractByProId(id).then(response => {
        if (response.data !== null){
          this.contractAmount = response.data.contractAmount;
        }
      })
    },
    //查询项目人员
    selectPerson(projectId) {
      queryByProjectId(projectId).then(response => {
        this.personListData = response;
        for (let i = 0; i < this.personListData.length; i++){
          this.personListData[i].index = i+1;
        }
      });
    },
    // 查询项目下分配的任务
    selectquest(id) {
      this.loading = true
      this.queryParams.projectId = id
      this.queryParams.refId = undefined
      listInitmsn(this.queryParams).then(response => {
        this.questListData = response.rows
        this.total = response.total
        this.loading = false
      })
      // 统计工时
      this.queryHour(id);
    },
    queryHour(projectId){
      queryByProjectId(projectId).then(response => {
        this.personListData = response;
        for (let i = 0; i < this.personListData.length; i++){
          this.personListData[i].index = i+1;
        }
      });
    },
    addRiks() {
      this.riskForm.projectName = this.projectFormData.projectName
      this.riskForm.projectCode = this.projectFormData.projectCode
      this.riskForm.projectId = this.projectFormData.id
      this.riskForm.createByName = this.$store.state.user.nikename
      this.riskForm.isSolve = '否'
      this.riskForm.chargePersonName = this.riskChargeName
      this.riskForm.chargePersonCode = this.riskChargeCode
      this.riskDialog = true
    },
    personClick(){
      this.peopleOpen = true
    },
    submitPeople(peopleList){
      if (peopleList.length !== 1) {
        return this.$message.warning("请选择一位人员!");
      }
      this.riskForm.chargePersonName = peopleList[0].userName
      this.riskForm.chargePersonCode = peopleList[0].userId
      this.peopleOpen =false
    },
    handleConfirm(){
      this.$modal.loading("保存中");
      addRisk(this.riskForm)
        .then((response) => {
          this.$modal.msgSuccess("新增成功");
          this.$emit("refresh");
          this.$modal.closeLoading()
          this.riskDialog = false
          this.selectRisk(this.id);
          this.clearRiskFrom()
        })
        .finally(() => {
          this.$modal.closeLoading()
        });
    },
    clearRiskFrom(){
      this.riskForm = {}
    },
    handleClick(tab, event) {
    },
    // 查询项目文档
    queryFile(id){
      this.fileQueryParams.refId = id
      listFile(this.fileQueryParams).then(response => {
        this.fileListData = response.rows;
        this.fileTotal = response.total;
      });
    },
    getHourList(){
      this.queryHourParams.questId = this.questId
      this.questLoading =true
      queryByQuestId(this.queryHourParams).then(response => {
        this.hourData = response;
        this.hourTotal = response[0].total;
        this.questLoading =false
      });
    },
    // 查询项目下工作记录
    selectWorkRecords(id) {
      this.loading = true
      this.workRecordsParams.projectId = id
      queryHourByProjectId(this.workRecordsParams).then(response => {
        if (response.length == 0){
          this.hourListData = response;
          this.workRecordsTotal = 0;
        }else {
          this.hourListData = response;
          this.workRecordsTotal = response[0].total;
        }
        this.loading = false;
      });
    },
    // 查询项目下技术难题
    selectTech(id) {
      this.loading = true
      this.techParams.projectId = id;
      listTech(this.techParams).then(response => {
        this.techListData = response.rows;
        this.techTotal = response.total;
        this.loading = false;
      });
    },
    // 获取项目风险点
    selectRisk(id){
      this.riskLoading = true
      selectRiskByProId(id).then(response => {
        this.riskListData = response.data
        this.riskLoading = false
      })
    },
    // 文件的在线预览
    onPreviewFile(row){
      this.$modal.loading("正在加载...");
      const fileExtension = row.fileName.split('.').pop();
      if (fileExtension === 'png' || fileExtension === 'jpg') {
        preview(row.fileId).then((s) =>{
          if (s != ""){
            this.dialogImageUrl = window.URL.createObjectURL(new Blob([s], { type: "image/jpeg" }));
            this.fileDialogVisible = true;
            this.$modal.closeLoading();
            return;
          }
        })
      }else if (fileExtension === 'pdf'){
        preview(row.fileId).then((response) =>{
          let blob = new Blob([response], { type: 'application/pdf;charset=utf-8' });
          const href = URL.createObjectURL(blob);
          this.$modal.closeLoading();
          window.open(href, 'newWindow');
        })
      } else if (fileExtension === 'xlsx' || fileExtension === 'xls'){
        this.$confirm('此类型文件不可预览, 是否下载?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.fileDownload(row)
        }).catch(() => {

        });
      } else {
        onlinePreview(row.fileId).then((response) => {
          let blob = new Blob([response], { type: 'application/pdf;charset=utf-8' });
          const href = URL.createObjectURL(blob);
          this.$modal.closeLoading();
          window.open(href, 'newWindow');
        })
      }
    },
    //附件下载
    /** 按钮操作 */
    fileDownload(row) {
      this.$modal.loading("导出中")
      download(row.fileId).then((rew) =>{
        this.$modal.closeLoading();
        // 创建临时的下载链接
        const url = window.URL.createObjectURL(rew);
        if (typeof window.chrome !== 'undefined') {
          // chrome
          const link = document.createElement('a');
          link.href = url;
          link.download = row.fileName;
          document.body.appendChild(link);
          link.click();
          setTimeout(() => {
            document.body.removeChild(link);
            URL.revokeObjectURL(url);
          }, 100);
          // window.URL.revokeObjectURL(link.href); // 释放资源
          // window.open("D:/151.pdf")
        } else if (typeof window.navigator.msSaveBlob !== 'undefined') {
          // IE
          // const blob = new Blob([rew],{ type: 'application/octet-stream' });
          window.navigator.msSaveBlob(rew,  row.fileName);
        } else {
          // Firefox
          const file = new File([rew],  row.fileName,{ type: 'application/octet-stream' });
          window.open(URL.createObjectURL(file));
        }
      }).finally(() =>{
      })
    },
    //单击任务列表
    handleRowDoubleClick(row) {
      this.questId = row.id
      this.queryHourParams.questId = row.id
      this.questLoading =true
      queryByQuestId(this.queryHourParams).then(response => {
        if (response.length == 0){
          this.hourData = response;
          this.hourTotal = 0;
        }else {
          this.hourData = response;
          this.hourTotal = response[0].total;
        }
        this.questLoading =false
      });
    },
    getPriorityColor(priority) {
      switch (priority) {
        case '低':
          return 'success';
        case '中':
          return 'default';
        case '高':
          return 'warning';
        case '紧急':
          return 'danger';
        default:
          return '';
      }
    },
    getStatusColor(status) {
      switch (status) {
        case '已完成':
          return 'success';
        case '进行中':
          return 'warning';
        case '已延期':
          return 'danger';
        default:
          return '';
      }
    },
    getDelayDays(row) {
      if (row.status !== "已完成"){
        const planDate = new Date(row.planEndTime);
        const currentDate = new Date();

        // 如果当前日期晚于计划完成日期，则延期天数为0；否则按照实际情况计算延期天数
        if (planDate > currentDate) {
        } else {
          // 计算时间差，得到延期天数
          const timeDiff = Math.abs(currentDate.getTime() - planDate.getTime());
          const delayDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
          if (delayDays > 1) {
            return "延期"+(delayDays - 1)+"天"; // 当前天不能算
          }
        }
      }
    },
    handleBack() {

    },
    cancel() {
      this.$emit("cancel");
    },
    cancelRisk() {
      this.riskDialog =false
      this.clearRiskFrom()
    },
  },
};
</script>
<style>
.el-dialog__wrapper > .el-dialog {
  border-radius: 26px;
  height: 650px;
}
</style>
<style lang="scss" scoped>

.always_title {
  font-size: 20px;
  font-weight: bold;
  line-height: 53px;
  margin-left: 30px;
}
.always_title1 {
  font-size: 18px;
  font-weight: bold;
  // line-height: 53px;
  margin-left: 15px;
  position: relative;
}

.always_title1 ::before {
  content: "|";
  flex-shrink: 0;
  width: 4px;
  height: 6%;
  margin-left: 12px;
  // background: #f90;
  color: #f90;
  position: absolute;
  left: -22px;
  margin-bottom: 12px;
}

.selectBox {
  width: 100%;
  min-width: 900px;
  display: flex;
  flex-direction: column;

  .topBox {
    width: 100%;
    display: flex;
    margin-top: 10px;
    .leftBox {
      width: 280px;
      height: 400px;
      margin-right: 10px;

      -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
        0 0 6px 0 rgba(0, 0, 0, 0.04);
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
      display: flex;
      flex-direction: column;

      .leftBox_title {
        width: 100%;
        height: 40px;
        font-size: 16px;
        line-height: 40px;
        padding-left: 10px;
        background-color: #f5f5f5;
        position: relative;
        .leftBox_title_do {
          position: absolute;
          right: 16px;
          top: 8px;
        }
      }

      .contentBox {
        width: 100%;
      }
    }
  }

  .bottomBox {
    margin-top: 15px;
    width: 100%;
    height: 75px;
    // border: 1px solid #DCDFE6;
    // -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
    // box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
    // overflow-y: auto;

    .selectPeopleList {
      width: 100%;
      display: flex;
      flex-wrap: wrap;

      .selectPeopleCard {
        width: 50px;
        height: 56px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 5px 10px;
        .user-avatar {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          color: #fff;
          background: #ffa502;
          font-size: 14px;
          text-align: center;
          line-height: 40px;
        }

        .userInfo {
          width: 100%;
          display: flex;
          flex-direction: column;
          margin-left: 5px;
          margin-right: 5px;

          div:nth-child(1) {
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%;
            text-align: center;
          }
        }
      }
    }
  }
}

.treeBox {
  width: 100%;
  height: 320px;
  overflow-x: hidden;
  overflow-y: auto;
}
.el-dialog{
  width: 900px;
  height: 650px;
}
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
::v-deep .el-drawer__header {
  height: 35px;
  margin: 20px 30px;
  border-radius: 4px;
  border-left: 5px solid #0169ff;
  background-color: white;
  line-height: 34px;
  padding-left: 18px;
  color: #0169ff;
  background-image: linear-gradient(90deg, #f2f7ff 0%, #ffffff 95%);
  border-radius: 4px;
  font-size: 18px;
  font-weight: 500;
  padding-top: 0px;
}
::v-deep .el-drawer__header {
  min-height: 7% !important;
  height: auto;
}
//.el-dialog .dialog-paging {
//  position: absolute;
//  bottom: 40px;
//  width: 96%;
//  padding: 10px 20px; /* 根据需要调整内边距 */
//  text-align: right;
//  border-top: 0px solid #ebeef5;
//}
.peopleBox {
  width: 100%;
  height: 360px;
  overflow-x: hidden;
  overflow-y: auto;

  .peopleList {
    width: 100%;
    height: auto;

    .peopleCard:hover {
      background-color: #fafafa;
      transition: 0.2s;

      .peopleName {
        color: #eb6100;
      }
    }
    .peopleCard {
      width: 100%;
      height: 48px;
      border-top: solid #f5f5f5 1px;
      border-bottom: solid #f5f5f5 1px;
      padding-left: 8px;
      display: flex;
      align-items: center;
      cursor: pointer;
      transition: 0.2s;
      ::v-deep .el-checkbox__label {
        display: flex;
        align-items: center;
      }

      .avatarBox {
        width: 40px;
        height: 40px;

        .user-avatar {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          color: #fff;
          font-size: 16px;
          text-align: center;
          line-height: 40px;
          user-select: none;
        }
      }

      .peopleInfoBox {
        width: 190px;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding-left: 8px;

        .peopleName {
          width: 100%;
          height: 20px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 16px;
          line-height: 20px;
        }

        .peopleDept {
          width: 100%;
          height: 20px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 14px;
          line-height: 20px;
          color: #999;
        }
      }

      .peopleDeleteBtn {
        width: 20px;
        height: 20px;
        // border-radius: 50%;
        // background: url(./delete2.png) no-repeat;
        background-size: 100% 100%;
        transition: 0.2s;
      }

      .peopleDeleteBtn:hover {
        width: 20px;
        height: 20px;
        // border-radius: 50%;
        // background: url(./delete1.png) no-repeat;
        background-size: 100% 100%;
        transition: 0.2s;
      }
    }
  }
}
</style>
